<dom-module id="grid-styling-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <p>Read more about writing custom CSS for themable elements from the
      <a href="https://github.com/vaadin/vaadin-themable-mixin/wiki">
        styling and theming documentation
      </a>.
    </p>

    <h3>Generating Class Names for Grid Cells</h3>

    <vaadin-demo-snippet id="grid-styling-demos-cell-class-generator" when-defined="vaadin-grid">
      <template preserve-content>

        <!-- Place these styles in index.html or in a separate HTML import -->
        <dom-module id="my-grid-styles" theme-for="vaadin-grid">
          <template>
            <style>
              /* Background needs a stronger selector to not be overridden */
              [part~="cell"].subscribed {
                background: rgb(255, 240, 240);
              }

              [part~="cell"].not-subscribed {
                background: rgb(245, 245, 255);
              }

              .email {
                font-style: italic;
              }
            </style>
          </template>
        </dom-module>

        <vaadin-grid aria-label="Styling Grid With Cell Class Generator Example" size="200">
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-styling-demos-cell-class-generator', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            grid.cellClassNameGenerator = function(column, model) {
              let classes = model.item.subscribed == 'true' ? 'subscribed' : 'not-subscribed';
              if (column.path === 'email') {
                classes += ' email';
              }
              return classes;
            };
          });
        </script>

      </template>
    </vaadin-demo-snippet>

    <h3>Updating Styles After Changes in the Data</h3>

    <vaadin-demo-snippet id="grid-styling-demos-regenerate-classes" when-defined="vaadin-grid">
      <template preserve-content>

        <!-- Place these styles in index.html or in a separate HTML import -->
        <dom-module id="my-grid-styles" theme-for="vaadin-grid">
          <template>
            <style>
              /* Background needs a stronger selector to not be overridden */
              [part~="cell"].subscribed {
                background: rgb(255, 240, 240);
              }

              [part~="cell"].not-subscribed {
                background: rgb(245, 245, 255);
              }

              .email {
                font-style: italic;
              }

              .checked {
                font-weight: bold;
              }
            </style>
          </template>
        </dom-module>

        <vaadin-grid aria-label="Updating Cell Class Generator Example" size="200">
          <vaadin-grid-column id="check" flex-grow="0" width="60px"></vaadin-grid-column>
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-styling-demos-regenerate-classes', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            const checkedItems = [];

            const checkColumn = document.querySelector('#check');
            checkColumn.renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<vaadin-checkbox></vaadin-checkbox>';
                root.firstElementChild.addEventListener('checked-changed', function(e) {
                  const index = checkedItems.indexOf(root.item);
                  if (e.detail.value && index === -1) {
                    checkedItems.push(root.item);
                  } else if (!e.detail.value && index > -1) {
                    checkedItems.splice(index, 1);
                  }

                  // Classes are re-generated also by clearCache() and render(),
                  // but this function is lighter as it doesn't do anything extra.
                  grid.generateCellClassNames();
                });
              }
              root.item = model.item;
              root.firstElementChild.checked = checkedItems.indexOf(model.item) > -1;
            };

            grid.cellClassNameGenerator = function(column, model) {
              let classes = model.item.subscribed == 'true' ? 'subscribed' : 'not-subscribed';
              if (column.path === 'email') {
                classes += ' email';
              } else if (column.path === 'name.first' && checkedItems.indexOf(model.item) > -1) {
                classes += ' checked';
              }
              return classes;
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>
  </template>
  <script>
    class GridStylingDemos extends DemoReadyEventEmitter(GridDemo(Polymer.Element)) {
      static get is() {
        return 'grid-styling-demos';
      }
    }
    customElements.define(GridStylingDemos.is, GridStylingDemos);
  </script>
</dom-module>
